<template>
  <el-container>
    <el-header>
      <!--表格上部标签-->
      <div class="tableHeader">
        <span>设计师管理</span>
      </div>
      <div class="tableSearch">
        <el-input placeholder="请输入内容" class="input-with-select" span="12" clearable>
          <el-select slot="prepend" placeholder="请选择" value="">
            <el-option label="订单编号" value="订单编号"></el-option>
            <el-option label="处理方式" value="处理方式"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </el-header><!--表格头部-->
    <el-main>
      <el-table
        ref="multipleTable"
        :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column align="center" label="编号">
          <template slot-scope="scope">{{ scope.row.designer_id }}</template>
        </el-table-column>
        <el-table-column align="center" label="设计师名字">
          <template slot-scope="scope">{{ scope.row.designer_name }}</template>
        </el-table-column>
        <el-table-column align="center" label="设计师出生地">
          <template slot-scope="scope">{{ scope.row.designer_birth_place}}</template>
        </el-table-column>
        <el-table-column align="center" label="设计师居住地">
          <template slot-scope="scope">{{ scope.row.designer_hold_place}}</template>
        </el-table-column>
<!--        <el-table-column align="center" label="设计师宣言"  style="width: 600px">-->
<!--          <template slot-scope="scope">{{ scope.row.designer_motto}}</template>-->
<!--        </el-table-column>-->
        <el-table-column align="center" label="设计师获奖年份">
          <template slot-scope="scope">{{ scope.row.designer_award_date }}</template>
        </el-table-column>
        <el-table-column align="center" label="设计师获奖名称">
          <template slot-scope="scope">{{ scope.row.designer_award_describe }}</template>
        </el-table-column>
<!--        <el-table-column align="center" label="设计师肖像">-->
<!--          <template slot-scope="scope">{{ scope.row.designer_main_pic_path }}</template>-->
<!--        </el-table-column>-->
<!--        <el-table-column align="center" label="设计师详图">-->
<!--          <template slot-scope="scope">{{ scope.row.designer_main_pic_path }}</template>-->
<!--        </el-table-column>-->
<!--        <el-table-column align="center" label="设计师获奖图片">-->
<!--          <template slot-scope="scope">{{ scope.row.designer_award_pic_path }}</template>-->
<!--        </el-table-column>-->
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
           <el-tag :type="toggleButtonChange(scope.row.designer_state).StateColor">
            {{ scope.row.designer_state }}
           </el-tag>
          </template>
        </el-table-column>
        <el-table-column  align="center" fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="handleCheck(scope.$index, scope.row)">查看</el-button>
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" :type="toggleButtonChange(scope.row.designer_state).color" @click="handleStar(scope.$index, scope.row)">{{toggleButtonChange(scope.row.designer_state).string}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main><!--表格内容-->
    <el-footer>
      <div class="tablePage">
        <el-button size="mini" type="primary" @click="addDialogFormVisible=true">新增设计师</el-button>
        <el-button size="mini" type="danger">全部停用</el-button>
        <el-button size="mini" type="success">全部启用</el-button>
        <el-button size="mini" type="info" disabled>导出 Excel</el-button>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page='currentPage'
          :page-sizes="[10, 20, 50, 100]"
          :page-size='pageSize'
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.length">
        </el-pagination>
      </div>
    </el-footer><!--表格尾部-->
    <!--查看弹框开始-->
    <el-dialog title="设计师详情" :visible.sync="checkDialogFormVisible">
      <el-form :model="form">
        <el-form-item label="" :label-width="formLabelWidth" >
          <img :src="'http://localhost:8989/'+imgAdd[1]" alt="设计师肖像" width="450px" height="300px">
        </el-form-item>
        <el-form-item label="设计师名称：" :label-width="formLabelWidth">
          <span>{{gridData.designer_name}}</span>
        </el-form-item>
        <el-form-item label="出生地：" :label-width="formLabelWidth" >
          <span>{{gridData.designer_birth_place}}</span>
        </el-form-item>
        <el-form-item label="居住地：" :label-width="formLabelWidth" >
          <span>{{gridData.designer_hold_place}}</span>
        </el-form-item>
        <el-form-item label="设计师宣言：" :label-width="formLabelWidth" >
          <span>{{gridData.designer_motto}}</span>
        </el-form-item>
        <el-form-item label="设计师简介：" :label-width="formLabelWidth" >
          <span>{{gridData.designer_describe}}</span>
        </el-form-item>
        <el-form-item label="获奖名称：" :label-width="formLabelWidth" >
          <span>{{gridData.designer_award_describe}}</span>
        </el-form-item>
        <el-form-item label="获奖年份：" :label-width="formLabelWidth" >
          <span>{{gridData.designer_award_date}}</span>
        </el-form-item>
        <el-form-item label="状态：" :label-width="formLabelWidth" >
          <span>{{gridData.designer_state}}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--查看弹框结束-->
    <!--编辑弹框开始-->
    <el-dialog title="编辑设计师详情" :visible.sync="editDialogFormVisible">
      <el-form :model="form">
        <el-form-item label="设计师名称：" :label-width="formLabelWidth">
          <el-input v-model="gridData.designer_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="出生地：" :label-width="formLabelWidth" >
          <el-input v-model="gridData.designer_birth_place" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="居住地：" :label-width="formLabelWidth" >
          <el-input v-model="gridData.designer_hold_place" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设计师宣言：" :label-width="formLabelWidth">
          <el-input v-model="gridData.designer_motto" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设计师简介：" :label-width="formLabelWidth" >
          <el-input v-model="gridData.designer_describe" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="肖像图路径：" :label-width="formLabelWidth" >
          <el-input v-model="gridData.designer_main_pic_path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="获奖名称：" :label-width="formLabelWidth" >
          <el-input v-model="gridData.designer_award_describe" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="获奖年份：" :label-width="formLabelWidth">
          <el-input v-model="gridData.designer_award_date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态：" :label-width="formLabelWidth" >
          <span>{{gridData.designer_state}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="designerEdit()">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑弹框结束-->
    <!--添加弹框开始-->
    <el-dialog title="新增设计师" :visible.sync="addDialogFormVisible">
      <el-form :model="addData" :rules="rules" ref="addData" label-width="100px" class="demo-ruleForm">
        <el-form-item label="设计师名称：" :label-width="formLabelWidth" prop="name">
          <el-input v-model="addData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="出生地：" :label-width="formLabelWidth" prop="birthPlace">
          <el-input v-model="addData.birthPlace" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="居住地：" :label-width="formLabelWidth" prop="holdPlace">
          <el-input v-model="addData.holdPlace" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设计师宣言：" :label-width="formLabelWidth" prop="motto">
          <el-input v-model="addData.motto" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设计师简介：" :label-width="formLabelWidth" prop="describe">
          <el-input v-model="addData.describe" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="肖像图路径：" :label-width="formLabelWidth" prop="picPath">
          <el-input v-model="addData.picPath" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="获奖图片路径：" :label-width="formLabelWidth">
          <el-input v-model="addData.awardPath" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="获奖名称：" :label-width="formLabelWidth">
          <el-input v-model="addData.awardName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="获奖年份：" :label-width="formLabelWidth">
          <el-input v-model="addData.awardDateDesigner" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态：" :label-width="formLabelWidth" prop="state">
          <el-input v-model="addData.state" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="designerAdd()">确 定</el-button>
      </div>
    </el-dialog>
    <!--添加弹框结束-->
  </el-container>
</template>

<script>
  import searchbox from '../ZF/searchbox'
  import buttons from '../zys/buttons'
    export default {
        name: "designerComponent",
      components:{
        searchbox,
        buttons
      },
      data(){
        return {
          currentPage: 1,
          currentSpuPage: 1,
          pageSize: 20,
          multipleSelection: [],// 多行选中
          // table数据传入
          list: [],
          gridData: [],//弹框数据
          addData: {
            name: '',
            birthPlace: '',
            holdPlace: '',
            motto: '',
            describe: '',
            picPath: '',
            awardPath: '',
            awardName: '',
            awardDateDesigner: '',
            state: ''
          },
          checkDialogFormVisible: false,
          editDialogFormVisible: false,
          addDialogFormVisible: false,
          designerState: {
            id: '',
            state: ''
          },
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
          },
          imgAdd: '',
          formLabelWidth: '120px',
          rules: {
            name: [
              {required: true, message: '请输入设计师名称', trigger: 'blur'},
            ],
            birthPlace:[
              {required: true, message: '请输入设计师出生地', trigger: 'blur'},
            ],
            holdPlace:[
              {required: true, message: '请输入设计师居住地', trigger: 'blur'},
            ],
            motto:[
              {required: true, message: '请输入设计师宣言', trigger: 'blur'},
            ],
            describe:[
              {required: true, message: '请输入设计师简介', trigger: 'blur'},
            ],
            picPath:[
              {required: true, message: '请输入设计师肖像图路径', trigger: 'blur'},
            ],
            state:[
              {required: true, message: '请输入使用状态：启用/停用', trigger: 'blur'},
            ],
          }
        }
      },
      methods:{
        // 选中行
        handleSelectionChange(val) {
          console.log('val:', val)
        },
        //查看
        handleCheck(index,row){
          this.checkDialogFormVisible=true;
          this.gridData=row;
          // console.log(' index:', index);
          // console.log(' row:', row);
        },
        // 编辑
        handleEdit(index, row) {
          this.editDialogFormVisible=true;
          this.gridData=row;
          // console.log(this.gridData.designer_name);
          // console.log(' row:', row);
        },
        //编辑弹框确认按钮
        designerEdit(){
          this.editDialogFormVisible = false;
          this.$axiosx.get('/api/backDesignerEdit',{params: this.gridData});
          this.designerUpdate();
        },
        //确认添加按钮
        designerAdd(){
          console.log(this.addData);
          this.addDialogFormVisible=false;
          this.$axiosx.get('/api/backDesignerAdd',{params: this.addData})
            .then( response => {
              this.designerUpdate();
            })
        },
        // 停用or启用
        handleStar(index, row) {
          this.designerState.id=row.designer_id;
          this.designerState.state=row.designer_state;
          // console.log(this.designerState);
          this.$axiosx.get('/api/backDesignerState',{params:this.designerState})
            .then(response=>{
            });
          this.designerUpdate();
          },
        // 分页控制开始
        handleSizeChange (val) {
          this.pageSize = val
        },
        handleCurrentChange (val) {
          this.currentPage = val
        },
        handleSpuCurrentChange (val) {
          this.currentSpuPage = val
        },
        // 分页控制结束
        toggleButtonChange (param) {
          if (param === '启用') {
            return {
              string: '停用',
              color: 'danger',
              StateColor: 'success'
            }
          } else {
            return {
              string: '启用',
              color: 'success',
              StateColor: 'danger'
            }
          }
        },
        designerUpdate(){
          this.$axiosx.get('/api/backDesigner')
            .then((response)=>{
              this.list=response.data;
              this.imgAdd=((this.list[0].designer_main_pic_path).split('./'));
              // console.log(this.imgAdd[1]);
            })
        }
      },
      created() {
        // this.$axiosx.get('/api/backDesigner')
        //   .then((response)=>{
        //     this.list=response.data;
        //     // this.imgAdd=((this.list[0].designer_main_pic_path).split('./'));
        //     // console.log(this.imgAdd[1]);
        //   });
        this.designerUpdate();
        }
    }
</script>

<style scoped>
  .tableHeader {
    width: 100%;
    color: white;
    background-color: #00838f;
    height: 40px;
    /*margin-bottom: 5px;*/
    font-weight: 700;
    font-size: 14px;
  }

  .tableHeader span {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin-left: 20px;
  }

  .tableHeader button {
    color: white;
    float: right;
    margin-right: 20px;
  }

  .tableSearch {
    /*width: 100%;*/
    height: 40px;
    background-color: #fff;
    margin-bottom: 1px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .el-pagination{
    float: right;
  }
  .input-with-select.el-input.el-input-group.el-input-group--append.el-input-group--prepend {
    width: 500px;
    margin-top: 5px;
  }
  .refundHeader{
    margin-bottom: 20px;
  }
  .el-select{
    width: 110px;
  }
  .el-input{
    width: 250px;
  }
</style>
